<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="./frame/bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="./frame/bootstrap/css/bootstrap-table.min.css" />
		<link rel="stylesheet" href="./frame/bootstrap/css/bootstrap-theme.min.css" />
		<link rel="stylesheet" href="css/userManager.css" />
		<link rel="shortcut icon" href="img/logo.ico">
		<title>用户信息</title>
	</head>
	<body style="background-image: url(img/loginbg3.png);">
		<div style="display: flex;align-items: center;justify-content: space-between; background-image: url(img/buttonbg.png);">
			<div class="panel-heading" style="font-size: 28px;font-weight: bold; color: #0000ff; font-family: '宋体';">旅游游轮管理系统</div>
			<div id="top1" style="margin-right: 30px;font-weight: bold; color: #ffffff;">
				<a id="login" style="color: #FFFFFF;" href="./JLogin.html">登录</a>
				<a style="color: #FFFFFF;">|</a>
				<a style="color: #FFFFFF;" id="a1">联系我们</a>
			</div>
		</div>
		<div class="content">
			<div id="myConsole" style="flex: 1;">
				<div style="display: flex; flex-direction: row;height: 300px;">
					<div style="display: inline-block; flex: 1; height:300px;overflow: hidden;">
						<div style="display: inline-block; width: 100%;">
							<h4 class="console-tips">用户数据总览</h4><br>
							<div class="graph-wrap">
								<div id="pieGraph"></div>
								<div id="barGraph"></div>
							</div>
						</div>
					</div>
					<div class="panel panel-default" style="width:500px; height: 300px; background-image: url(img/loginbg3.png);">
						<div id="myCarousel" data-ride="carousel" class="carousel slide" style="width:100%; height: 100%;">
							<!-- 轮播（Carousel）指标 -->
							<ol class="carousel-indicators">
								<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
								<li data-target="#myCarousel" data-slide-to="1"></li>
								<li data-target="#myCarousel" data-slide-to="2"></li>
							</ol>   
							<!-- 轮播（Carousel）项目 -->
							<div class="carousel-inner" style="width:100%;height: 100%;">
								<div class="item active" style="width:100%;height: 100%;">
									<img src="img/fruit.jpg" alt="First slide" style="width:100%; height: 100%;">
									<div class="carousel-caption">一蓑烟雨任平生</div>
								</div>
								<div class="item" style="width:100%;height: 100%;">
									<img src="img/fruit.jpg" alt="Second slide" style="width:100%;height: 100%;">
									<div class="carousel-caption">仰天大笑出门去</div>
								</div>
								<div class="item" style="width:100%;height: 100%;">
									<img src="img/fruit.jpg" alt="Third slide" style="width:100%;height: 100%;">
									<div class="carousel-caption">我辈岂是蓬蒿人</div>
								</div>
							</div>
							<!-- 轮播（Carousel）导航 -->
							<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
								<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
								<span class="sr-only">Previous</span>
							</a>
							<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
								<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
								<span class="sr-only">Next</span>
							</a>
						</div>
					</div>
				</div>
				<div style="width: 100%;height: 1px;background-color: #000000;"></div>
				<div class="bottom-wrap">
					<div class="tip-card">
						<div class="func-item statistics">
							<span>拥有游轮</span>
							<hr>
							<div class="detail-tips-statistics">
								<span>3艘</span>
							</div>
						</div>
						<div class="func-item statistics">
							<span>公司收支</span>
							<hr>
							<div class="detail-tips-statistics">
								<span>收入:20万 支出:10万</span>
							</div>
						</div>
						<div class="func-item statistics">
							<span>航程统计</span>
							<hr>
							<div class="detail-tips-statistics">
								<span>重庆->贵阳</span>
							</div>
						</div>
					</div>
					<div class="tip-card">
						<div class="func-item">
							<span>数据简介</span>
							<ul>
								<li>用户数据包括昵称、性别、年龄和号码等</li>
								<li>控制台显示的数据是所有用户中男女比例和用户权限统计数据</li>
								<li>管理员可对用户数据做增删改查操作</li>
								<li>管理员可以到后台查看数据的完整性</li>
							</ul>
						</div>
						<div class="func-item">
							<span>系统介绍</span>
							<ul>
								<li>系统版本1.0.0</li>
								<li>管理员可通过右侧菜单栏选择功能操作</li>
								<li>目前系统存在较多bug，需要进一步维护</li>
								<li>前端基于htm+css+js+jquery+bootstrap开发</li>
								<li>后端基于Java springMVC框架开发</li>
							</ul>
						</div>
						<div class="func-item">
							<span>注意事项</span>
							<ul>
								<li>当前系统不稳定，存在许多bug待修复</li>
								<li>若出现卡顿、闪退请重启系统</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div id="myData" style="display: none; flex: 1;">
				<div class="panel panel-default rideManagePanel">
					<div class="tip-card ride-card">
						<div class="func-item statisticsRide">
							<span>拥有游轮</span>
							<hr>
							<div class="detail-tips-statistics">
								<span>3艘：GoodWind,GoodSky,GoodSnow</span>
							</div>
						</div>
						<div class="func-item statisticsRide">
							<span>公司收支</span>
							<hr>
							<div class="detail-tips-statistics">
								<span>收入:20万 支出:10万</span>
							</div>
						</div>
						<div class="func-item statisticsRide">
							<span>航程统计</span>
							<hr>
							<div class="detail-tips-statistics">
								<span>重庆->贵阳</span>
							</div>
						</div>
						<div class="func-item statisticsRide">
							<span>当前航程</span>
							<hr>
							<div class="detail-tips-statistics">
								<span>贵阳->重庆</span>
							</div>
						</div>
					</div>
				</div>
				<div class="data-detail-wrap">
					<div class="func-item ride-line-item">
						<span>重庆->贵阳</span>
						<ul>
							<li>游轮:Goodsky</li>
							<li>巡游时长:3天</li>
							<li>停靠港口：沙坪坝、遵义</li>
							<li>价格：经济舱-800；头等舱：1000</li>
						</ul>
						<button class="btn btn-warning purchase" onclick="Toast('购买');">购买</button>
					</div>
					<div class="func-item ride-line-item">
						<span>贵阳->重庆</span>
						<ul>
							<li>游轮:Goodwind</li>
							<li>巡游时长:3天</li>
							<li>停靠港口：沙坪坝、遵义</li>
							<li>价格：经济舱-800；头等舱：1000</li>
						</ul>
						<button class="btn btn-warning purchase" onclick="Toast('购买');">购买</button>
					</div>
					<div class="func-item ride-line-item">
						<span>贵阳->重庆</span>
						<ul>
							<li>游轮:Goodwind</li>
							<li>巡游时长:3天</li>
							<li>停靠港口：沙坪坝、遵义</li>
							<li>价格：经济舱-800；头等舱：1000</li>
						</ul>
						<button class="btn btn-warning purchase" onclick="Toast('购买');">购买</button>
					</div>
					<div class="func-item ride-line-item">
						<span>贵阳->重庆</span>
						<ul>
							<li>游轮:Goodwind</li>
							<li>巡游时长:3天</li>
							<li>停靠港口：沙坪坝、遵义</li>
							<li>价格：经济舱-800；头等舱：1000</li>
						</ul>
						<button class="btn btn-warning purchase" onclick="Toast('购买');">购买</button>
					</div>
					<div class="func-item ride-line-item">
						<span>贵阳->重庆</span>
						<ul>
							<li>游轮:Goodwind</li>
							<li>巡游时长:3天</li>
							<li>停靠港口：沙坪坝、遵义</li>
							<li>价格：经济舱-800；头等舱：1000</li>
						</ul>
						<button class="btn btn-warning purchase" onclick="Toast('购买');">购买</button>
					</div>
					<div class="func-item ride-line-item">
						<span>贵阳->重庆</span>
						<ul>
							<li>游轮:Goodwind</li>
							<li>巡游时长:3天</li>
							<li>停靠港口：沙坪坝、遵义</li>
							<li>价格：经济舱-800；头等舱：1000</li>
						</ul>
						<button class="btn btn-warning purchase" onclick="Toast('购买');">购买</button>
					</div>
					<div class="func-item ride-line-item">
						<span>贵阳->重庆</span>
						<ul>
							<li>游轮:Goodwind</li>
							<li>巡游时长:3天</li>
							<li>停靠港口：沙坪坝、遵义</li>
							<li>价格：经济舱-800；头等舱：1000</li>
						</ul>
						<button class="btn btn-warning purchase" onclick="Toast('购买');">购买</button>
					</div>
					<div class="func-item ride-line-item">
						<span>贵阳->重庆</span>
						<ul>
							<li>游轮:Goodwind</li>
							<li>巡游时长:3天</li>
							<li>停靠港口：沙坪坝、遵义</li>
							<li>价格：经济舱-800；头等舱：1000</li>
						</ul>
						<button class="btn btn-warning purchase" onclick="Toast('购买');">购买</button>
					</div>
				</div>
			</div>
			<div id="myAdd" style="display: none; flex: 1;">
				<div class="panel panel-default" style="display:flex; flex-direction:column;  align-items: center; background-image: url(img/loginbg3.png);">
					<div style="width: 100%;">
						<table id="cruiseTab"
							   data-show-refresh="true"
							   data-show-toggle="true"
							   data-show-columns="true"
							   data-id-field="cruiseID"
							   data-search="true"
							   data-search-align="left"
							   style="background-color: #FFFFFF;">
						</table>
					</div>
				</div>
			</div>
			<div id="myQuery" style="display: none; flex: 1;">
				<div class="panel panel-default" style="display:flex; flex-direction:row;  align-items: center; background-image: url(img/loginbg3.png);">
					<div style="width: 100%;">
						<table id="portTab"
							   data-show-refresh="true"
							   data-show-toggle="true"
							   data-show-columns="true"
							   data-id-field="portID"
							   data-search="true"
							   data-search-align="left"
							   style="background-color: #FFFFFF;">
						</table>
					</div>
				</div>
			</div>
			<div id="myUpdate" style="display: none; flex: 1;">
				<div class="panel panel-default" style="display:flex; flex-direction:row;  align-items: center; background-image: url(img/loginbg3.png);">
					<div style="width: 100%;">
						<table id="strollTab"
							   data-show-refresh="true"
							   data-show-toggle="true"
							   data-show-columns="true"
							   data-id-field="strollID"
							   data-search="true"
							   data-search-align="left"
							   style="background-color: #FFFFFF;">
						</table>
					</div>
				</div>
			</div>
			<div id="myDelete" style="display: none; flex: 1;">
				<div class="panel panel-default" style="display:flex; flex-direction:column;  align-items: center; background-image: url(img/loginbg3.png);">
					<div class="tip-card" style="height: 200px;">
						<div class="func-item statistics">
							<span>当前总收入</span>
							<hr>
							<div class="detail-tips-statistics">
								<span>20000元</span>
							</div>
						</div>
						<div class="func-item statistics">
							<span>当前用户退款</span>
							<hr>
							<div class="detail-tips-statistics">
								<span>2000元</span>
							</div>
						</div>
						<div class="func-item statistics">
							<span>公司净收入</span>
							<hr>
							<div class="detail-tips-statistics">
								<span>18000元</span>
							</div>
						</div>
					</div>
					<div style="width: 100%;">
						<table id="corporationIOTab"
							   data-show-refresh="true"
							   data-show-toggle="true"
							   data-show-columns="true"
							   data-id-field="payID"
							   data-search="true"
							   data-search-align="left"
							   style="background-color: #FFFFFF;">
						</table>
					</div>
				</div>
			</div>
			<div id="myUserList" style="display: none; flex: 1;">
				<div class="panel panel-default" style="display:flex; flex-direction:column; background-image: url(img/loginbg3.png);">
					<div class="operatBtn-wrap">
						<button type="button" class="btn btn-primary deleButton" onclick="changePage(3)">添加用户数据</button>
						<button type="button" class="btn btn-primary deleButton" id="deleteByIds">删除选中数据</button>
						<button type="button" class="btn btn-primary deleButton" onclick="changePage(5)">修改选中数据</button>
						<button type="button" class="btn btn-warning deleButton" onclick="changePage(2)">返回主控制台</button>
					</div>
					<div style="inline-block;text-align:center;margin-top:10px;">
						<div class="item" style="display:inline-block;text-align:center;width: 20%;height: 200px; overflow-y: auto;">
							<span>添加用户</span>
							<div style="font-size: 16px; font-weight: bold;font-family: '宋体'; margin: 10px;text-align: center;">需要填写所有信息之后点击添加即可完成添加信息</div>
							<form id="form-add" style="text-align: center;">
								<input id="addUserID" name="userID" type="text" placeholder="用户ID" />
								<input id="addUserName" name="userName" type="text" placeholder="用户名" />
								<input id="addUserPassword" name="password" type="text" placeholder="密码" />
								<input id="addUserSex" name="sex" type="text" placeholder="性别" />
								<input id="addUserAge" name="age" type="text" placeholder="年龄" />
								<input id="addUserTelephone" name="telephone" type="text" placeholder="电话" />
								<input id="addUserRole" name="Role" type="text" placeholder="角色" />
							</form>
							<button type="button" name="submit" class="btn btn-success" onclick="addUser()">添加</button>
						
						</div>
						<div class="item" id="chat-panel2" style="display:inline-block;width: 20%;height:200px; overflow-y: auto;">
							<span>删除用户</span>
							<div id="del-text"  style='background-color:#FFFFFF;width:100%;border:1px solid #000000'>
								<form id="form-delquery" style="display:flex;flex-direction:row;align-items:center;justify-content:space-between;">
									<input id="deleteUserName" type="text" placeholder="输入用户名查询并删除" />
									<button type="button" id="del-btn" class="btn btn-success" onclick="delQuery()">删除</button>
								</form>
								<div id="deleteResult" style="width:100%;"></div>
							</div>
						</div>
						<div class="item" style="text-align:center;display:inline-block;width: 20%; height: 200px; overflow-y: auto;">
							<span>修改用户</span>
							<form id="form-updateQuery" style="width:100%; display:flex;flex-direction:row;align-items:center;justify-content:space-between;">
								<input id="queryUpdateUserName" type="text" placeholder="输入用户名以获取用户数据"/>
								<button type="button" id="queryUpdateByName" class="btn btn-success">获取</button>
							</form>
							<div style="width: 100%; height:1px; background-color: #000000;"></div>
						
							<div style="display:inline-block; text-align: center;" id="updatePanel">
								<div style="font-size: 16px; font-weight: bold;font-family: '宋体'; margin: 10px;text-align: center;">需要确认信息输入完成之后再修改哦</div>
								<form id="form-update">
									<input id="updateUserID" name="userID" type="text" placeholder="用户ID" readonly/>
									<input id="updateUserName" name="userName" type="text" placeholder="用户名" />
									<input id="updateUserPassword" name="password" type="text" placeholder="密码" />
									<input id="updateUserSex" name="sex" type="text" placeholder="性别" />
									<input id="updateUserAge" name="age" type="text" placeholder="年龄" />
									<input id="updateUserTelephone" name="telephone" type="text" placeholder="电话" />
									<input id="updateUserRole" name="Role" type="text" placeholder="角色" />
								</form>
								<button type="button" class="btn btn-success" onclick="updateUser()">修改</button>
							</div>
						</div>
						<div class="item" id="chat-panel" style="display:inline-block;width: 20%;height:200px; overflow-y: auto;">
							<span>查找用户</span>
							<div id="chat-text"  style='background-color:#FFFFFF;width:100%;border:1px solid #000000'>
								<form id="form-query" style="display:flex;flex-direction:row;align-items:center;justify-content:space-between;">
									<input id="queryUserName" type="text" placeholder="输入用户名查询" />
									<button type="button" id="queryByName" class="btn btn-success">查询</button>
								</form>
								<div id="queryResult" style="width:100%;"></div>
							</div>
						</div>
					</div>
					<hr>
					<table id="usertab"
						data-show-refresh="true"
						data-show-toggle="true"
						data-show-columns="true"
						data-id-field="id"
						data-search="true"
						data-search-align="left"
						style="background-color: #FFFFFF;">
					</table>
				</div>
			</div>
			<div id="mySetting" style="display: none; flex: 1;">
				<div class="panel panel-default" style="display:flex; flex-direction:column; background-image: url(img/loginbg3.png);">
					<!-- <div class="operatBtn-wrap">
						<input id="batchAssessment" style="width:80%;outline:none;" name="assessment" type="text" placeholder="录入所有用户打卡天数，逗号分隔" />
						<button id="commitAssessment" type="button" class="btn btn-warning deleButton">提交</button>
					</div> -->
					<table id="passengerTab"
						   data-show-refresh="true"
						   data-show-toggle="true"
						   data-show-columns="true"
						   data-id-field="passengerID"
						   data-search="true"
						   data-search-align="left"
						   style="background-color: #FFFFFF;">
					</table>
				</div>
			</div>
<!--			右操作栏-->
			<div class="left-panel">
				<img id="head-photo" src="img/header.jpg" style="box-shadow: 0px 0px 3px 3px #ffffff; width: 64px; height: 64px; border-radius: 50%; margin-top: 50px;" />
				<div class="nick-wrap" style="width: 80%;display: flex;flex-direction: column;align-items: flex-start;">
					<span class="nick" style="font-weight: bold; margin-top: 10px;">昵称：测试一号</span>
					<span class="signature" style="font-size: 12px;margin-top: 5px;">签名：每个人的一生都是一次远行</span>
				</div>

				<!-- function -->
				<div class="function-api">
					<ul class="list-group">
						<li class="list-group-item" id="console" onclick="changePage(2)" style="background-color: #ff5500;">
							<span class="glyphicon glyphicon-th-large"></span> 主控制台
						</li>
						<li class="list-group-item" id="data" onclick="changePage(1)">
							<span class="glyphicon glyphicon-user"></span> 航程列表
						</li>
						<li class="list-group-item" id="add" onclick="changePage(3)">
							<span class="glyphicon glyphicon-plus-sign"></span> 游轮管理
						</li>
						<li class="list-group-item" id="query" onclick="changePage(4)">
							<span class="glyphicon glyphicon-search"></span> 港口查询
						</li>
						<li class="list-group-item" id="update" onclick="changePage(5)">
							<span class="glyphicon glyphicon-retweet"></span> 巡游列表
						</li>
						<li class="list-group-item" id="delete" onclick="changePage(6)">
							<span class="glyphicon glyphicon-exclamation-sign"></span> 公司收支
						</li>
						<li class="list-group-item" id="listUser" onclick="changePage(7)">
							<span class="glyphicon glyphicon-list"></span> 管理用户
						</li>
						<li class="list-group-item" id="setting" onclick="changePage(8)">
							<span class="glyphicon glyphicon-wrench"></span> 乘客管理
						</li>
<!--						<li class="list-group-item" id="setting" onclick="changePage(8)">-->
<!--							<span class="glyphicon glyphicon-wrench"></span> 设置-->
<!--						</li>-->
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>

<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./frame/bootstrap/js/bootstrap.min.js"></script>
<script src="./frame/bootstrap/js/bootstrap-table.min.js"></script>
<script src="./frame/bootstrap/js/bootstrap-table-zh-CN.min.js"></script>
<script src="./frame/bootstrap/js/bootstrap-table-locale-all.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/usermanager.js"></script>
<script src="js/managerTab.js"></script>
